<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<title>Demo 2: Drag and drop</title>
	<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
	<style type="text/css">
	/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
	#mainContainer{
		width:600px;
		margin:0 auto;
		margin-top:10px;
		border:1px solid #000;
		padding:2px;
	}
	
	#capitals{
		width:200px;
		float:left;
		border:1px solid #000;
		background-color:#E2EBED;
		padding:3px;
		height:400px;
	}
	#countries{
		width:300px;
		float:right;
		margin:2px;
		height:400px;
	}	
	.dragableBox,.dragableBoxRight{
		width:80px;
		height:20px;
		border:1px solid #000;
		background-color:#FFF;		
		margin-bottom:5px;
		padding:10px;
		font-weight:bold;
		text-align:center;
	}
	div.dragableBoxRight{
		height:65px;
		width:110px;
		float:left;
		margin-right:5px;
		padding:5px;
		background-color:#E2EBED;
	}
	.dropBox{
		width:190px;
		border:1px solid #000;
		background-color:#E2EBED;
		height:400px;
		margin-bottom:10px;
		padding:3px;
		overflow:auto;
	}		
	a{
		color:#F00;
	}
		
	.clear{
		clear:both;
	}
	</style>	
	<script type="text/javascript" src="../js/dhtml-suite-for-applications.js"></script>
</head>
<body>	
	<div id="header">
		<img src="../images/logo.png">
	</div>
	<div id="mainContainer">
		<h2>Drag and drop - demo 3</h2>
		<div id="capitals">
			<p><b>Capitals</b></p>
			<div id="dropContent">
				<div class="dragableBox" id="box1">Oslo</div>
				<div class="dragableBox" id="box2">Stockholm</div>
				<div class="dragableBox" id="box3">Washington</div>
				<div class="dragableBox" id="box4">Copenhagen</div>
				<div class="dragableBox" id="box5">Seoul</div>
				<div class="dragableBox" id="box6">Rome</div>
				<div class="dragableBox" id="box7">Madrid</div>
			</div>
		</div>
		<div id="countries">
			<div id="box106" class="dragableBoxRight">Italy</div>
			<div id="box107" class="dragableBoxRight">Spain</div>
			<div id="box101" class="dragableBoxRight">Norway</div>
			<div id="box104" class="dragableBoxRight">Denmark</div>
			<div id="box105" class="dragableBoxRight">South Korea</div>
			<div id="box102" class="dragableBoxRight">Sweden</div>
			<div id="box103" class="dragableBoxRight">United States</div>
			
		
		</div>
		<div class="clear"></div>
	</div>

<div id="debug"></div>
<script type="text/javascript">

// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
	var targetObj = document.getElementById(targetId);	// Creating reference to target obj
	var subDivs = targetObj.getElementsByTagName('DIV');	// Number of subdivs
	if(subDivs.length>0 && targetId!='capitals')return;	// Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
	var sourceObj = document.getElementById(idOfDraggedItem);	// Creating reference to source, i.e. dragged object
	var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1;	// Find numeric id of target
	var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1;	// Find numeric id of source
	if(numericIdTarget-numericIdSource==100){	// In the html above, there's a difference in 100 between the id of the country and it's capital(example:
												// Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
		sourceObj.style.backgroundColor='#0F0';	// Set green background color for dragged object
	}else{
		sourceObj.style.backgroundColor='';	// Reset back to default white background color
	}
	if(targetId=='capitals'){	// Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
		targetObj = targetObj.getElementsByTagName('DIV')[0];	
	}
	targetObj.appendChild(sourceObj);	// Append	
}



var dragDropObj = new DHTMLSuite.dragDrop();	// Creating drag and drop object

// Assigning drag events to the capitals
dragDropObj.addSource('box1',true);	// Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true);	// Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true);	// Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true);	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true);	// Make <div id="box4"> dragable. slide item back into original position after drop


// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('capitals','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop

dragDropObj.init();	// Initizlizing drag and drop object
</script>



</body>
</html>